.out_storage_list {
  height: calc(100vh - 92px - 24px);
  box-sizing: border-box;
  padding: 12px;
  margin: 12px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  row-gap: 12px;

  .header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 12px;

    .search {
      display: flex;
      column-gap: 5px;
      flex-wrap: wrap;
      row-gap: 5px;

      .date_type {
        width: 100px;
      }

      .date_range {
        width: 260px;
      }

      .source {
        width: 140px;
      }

      .status {
        width: 120px;
      }

      .type {
        width: 160px;
      }

      .input {
        width: 200px;
      }
    }
  }

  .table {
    max-height: calc(100% - 80px);
  }

  .pagination {
    display: flex;
    justify-content: flex-end;
  }
}

// .header {
//   display: flex;
//   align-items: center;
//   justify-content: space-between;
//   flex-wrap: wrap;

//   .mr5 {
//     margin-right: 5px;
//   }

//   .btns {
//     display: flex;
//     align-items: center;
//     flex-wrap: wrap;
//     margin-bottom: 5px;

//     .default {
//       margin-left: 5px;
//     }

//     .btn {
//       display: flex;
//       align-items: center;
//     }
//   }

//   .search {
//     display: flex;
//     align-items: center;
//     flex-wrap: wrap;
//     gap: 5px;

//     :deep(.el-input__wrapper) {
//       height: 26px;
//     }

//     :deep(.el-date-editor) {
//       height: 26px;
//       flex-grow: 0;
//     }

//     .search-item {
//       width: 7vw;
//     }

//     .date-range {
//       width: 14vw;
//       display: flex;
//       gap: 5px;
//       align-items: center;
//     }

//     .input-with-select {
//       width: 250px;
//       margin-bottom: 5px;
//     }

//     .search-input {
//       width: 11vw;
//     }
//   }
// }

.el-tag.el-tag--success {
  --el-tag-text-color: #00c0c0;
  --el-tag-bg-color: #ebf6f6;
  --el-tag-border-color: #ebf6f6;
  --el-tag-hover-color: #00c0c0;
}
.purple_tag {
  color: #6222c2;
  background-color: #f3edff;
}
.el-tag.el-tag--info {
  --el-tag-border-color: var(--el-color-info-light-9);
}

.el-tag {
  --el-tag-border-color: var(--el-color-primary-light-9);
}

.el-tag.el-tag--warning {
  --el-tag-border-color: var(--el-color-warning-light-9);
}
